import * as React from 'react';
import CitySection from './citySection';
import AlphaIndex from './alphaIndex';
import type { Section } from './types';
import './index.module.scss';
const { memo } = React;

const alphabet = Array.from(new Array(26), (_, index) => {
  return String.fromCharCode(65 + index);
});

interface CityListProps {
  sections: Section[];
  toAlpha: (name: string) => void;
  onSelect?: (val: string) => void;
}
function CityList(props: CityListProps) {
  const { sections, toAlpha, onSelect } = props;

  return (
    <div styleName="city-list-wrap">
      <div styleName="city-cate">
        {sections.map((section, index) => {
          return (
            <CitySection
              key={section.title}
              title={section.title}
              cities={section.citys}
              onSelect={onSelect}
              id={alphabet[index]}
            />
          );
        })}
      </div>
      <div styleName="city-index-item-wrap">
        {alphabet.map((alpha) => {
          return <AlphaIndex key={alpha} alpha={alpha} onClick={toAlpha} />;
        })}
      </div>
    </div>
  );
}
export default memo(CityList);
